<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element-watermark</title>
<style>
.watermark {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    background-repeat: repeat;
}
</style>
</head>

<body>
    <div class="app">
        <h1>秋风</h1>
        <p>hello</p>

    </div>
    <script>
        function createWaterMark() {
            const svgStr =
            `<svg xmlns="http://www.w3.org/2000/svg" width="180px" height="100px">
                <text x="0px" y="30px" dy="16px"
                    text-anchor="start"
                    stroke="#000"
                    stroke-opacity="0.1"
                    fill="none"
                    transform="rotate(-20)"
                    font-weight="100"
                    font-size="16"
                    >
                    秋风的笔记
                </text>
            </svg>`;
            return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
        }
        const watermakr = document.createElement('div');
        watermakr.className = 'watermark';
        watermakr.style.backgroundImage = `url(${createWaterMark()})`
        document.body.appendChild(watermakr);
    </script>
</body>

</html>